<template>
  <view>
    <view class="m-title">TODO-List</view>
    <!-- 输入框 -->
    <view class="g-wrapper">
      <u-input
        type="text"
        placeholder="请输入内容"
        v-model="inputValue"></u-input>
      <u-button type="primary" class="m-btn" @click="bindAdd">添加</u-button>
    </view>

    <!-- 列表显示 -->
    <view v-for="(item, index) in list" :key="index">
      <text @click="bindDelete(index)">{{ item }}</text>
    </view>
  </view>
</template>
<!-- 
 获取输入框内容，添加到数组显示 
 -->
<script>
export default {
  data() {
    return {
      inputValue: "",
      list: [],
    };
  },
  methods: {
    bindAdd() {
      this.list.push(this.inputValue);
      this.inputValue = "";
    },
    bindDelete(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.g-wrapper {
  display: flex;
}
.m-title {
  font-size: 20px;
}
.m-btn {
  width: 100px;
  margin-left: 5px;
}
</style>
